<template>
  <div class="w-full h-screen overflow-hidden">
    <div class="relative h-[87vh]">
      <el-container class="h-full">
        <!-- 左侧菜单栏 -->
        <el-aside width="230px" class="bg-gray-50 px-5">
          <!-- logo -->
          <div class="absolute left-0 -top-7 mix-blend-darken">
            <img src="../../src/assets/logo.png" class="w-36">
          </div>
          <myMenu />
        </el-aside>
        <el-container direction="vertical" class="w-[calc(100vw-230px)]">
          <!-- 顶部导航栏 -->
          <el-header height="13vh">
            <myNav />
          </el-header>
          <!-- 主内容 主要路由出口 -->
          <el-main class="diy_scrollbar bg-gray-50">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
      <!-- 歌词组件 -->
      <div ref="lyricRef" class="absolute w-full h-full bg-white z-40 duration-700">
        <lyric @openPage="openPage" />
      </div>
      <!-- 播放列表组件 -->
      <playList ref="playListRef" :class="isPlayList ? `translate-x-0` : `translate-x-[440px]`"
        class="absolute right-3 bottom-0 duration-200" />
    </div>
    <!-- 底部控制栏 -->
    <el-footer height="13vh" class="absolute w-full bottom-0 bg-gray-50 z-50">
      <myFooter @openPage="openPage" />
    </el-footer>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, useTemplateRef } from 'vue'
import { useStore } from '@renderer/store'

const { songDetailStore } = useStore()
const context = getCurrentInstance()
const bus = context?.appContext.config.globalProperties.$bus
// 播放列表的显示和隐藏
const isPlayList = ref(false)
const lyricRef = useTemplateRef('lyricRef')

onMounted(() => {
  bus.on('showPlayList', (val: boolean) => {
    isPlayList.value = val
  })
})
//显示歌词组件
const openPage = (value: boolean) => {
  lyricRef.value!.style.transform = `translateY(${value ? -100 : 0}%)`
  if (value) {
    songDetailStore.getLyric()
  }
}
</script>

<style scoped>
:deep(.el-main) {
  padding: 0;
}
</style>
